<script setup lang="ts">
import imgUrl from "@/views/Home/Like/images/like_01.png"
const like_arr = [
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
    { imgUrl, content: "阳光美包新款单肩包女包时尚子母包四件套女", price: 116.00 },
]
</script>

<template>
<section class="like-title">
    <h3>猜你喜欢</h3>
    <div class="refresh">换一换</div>
</section>
    <ul class="like">
        <li v-for="_i in like_arr">
            <img :src="_i.imgUrl">
            <section class="content">
                <div class="content-detail">{{ _i.content }}</div>
                <div class="prine">￥{{ _i.price }}</div>
            </section>
           
        </li>
    </ul>
</template>

<style scoped lang="less">

@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";
.like-title{
    h3{
        font-size: @max-font-size;
        font-weight: bold;
    }
    .refresh{
        font-size:@min-font-size;
    }
    margin-top: 20px;
    padding:0 @main-padding;
    display: flex;
    justify-content: space-between;
}
.like{
    display: flex;
    border: 1px solid @border-gray-board;
    margin: 5px 50px 0 50px;
    padding: 30px;
    li {
            padding-left: 20px;
    
            img {
                transition: all 400ms;
                &:hover {
                    opacity: 0.8;
                    transform: scale(1.1);
                }
            }
        }    .content{
        border-right: 1px solid @border-gray-board;
        padding: 5px 0 20px 0;
        .content-detail{
            margin-top: 10px;
            font-size: @min-font-size;
        }
        .prine{
            margin-top: 10px;
            font-size: @max-font-size;
            font-weight: bold;
            color: red;
        }
    }
}
</style>